<template>
    <div>
        <el-form :model="queryForm" :inline="true" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="queryForm.userCode" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="queryForm.userName" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getData">查询</el-button>
                <el-button type="primary" @click="handleNew">添加</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="easyPage.records" ref="singleTable" highlight-current-row style="width: 100%" border>
            <el-table-column type="index" class-name="index-table"/>
            <el-table-column prop="userCode" label="账号"/>
            <el-table-column prop="userName" label="名称"/>
            <el-table-column prop="idNumber" label="身份证号"/>
            <el-table-column prop="phone" label="联系电话"/>
            <el-table-column label="操作" width="100" header-align="center">
                <template slot-scope="scope">
                    <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <common-page v-model="easyPage" @change="getData" @current-change="getData"/>
        <except-role-user-dialog :roleId="dlg.roleId" :sysCode="dlg.sysCode" v-model="dlg.dialogVisible" @close="handleClose"/>
    </div>
</template>

<script>
  import CommonPage from '../../../components/common/CommonPage.vue'
  import ExceptRoleUserDialog from './ExceptRoleUserDialog.vue'

  export default {
    components: {
      ExceptRoleUserDialog,
      CommonPage
    },
    props: {
      roleId: {
        type: String,
        required: true
      },
      sysCode: {
        type: String,
        required: true
      }
    },
    watch: {
      roleId: function () {
        this.getData()
      }
    },
    data () {
      return {
        dlg: {
          dialogVisible: false,
          roleId: '',
        },
        easyPage: {
          current: 1,
          size: 10
        },
        queryForm: {},
      }
    },
    created () {
    },
    methods: {
      getData () {
        let self = this
        Object.assign(self.queryForm, {
          current: self.easyPage.current,
          size: self.easyPage.size,
          roleId: self.roleId
        })
        self.$axios
          .post('roleUserAction/findNewUserPageWithRoleId', self.queryForm)
          .then((res) => {
            self.easyPage = res.data
          })
      },
      handleNew () {
        let self = this
        if(!self.roleId){
            self.$alert('请选择角色', '提示!')
            return
        }
        self.dlg = {
          dialogVisible: true,
          roleId: self.roleId,
          sysCode:self.sysCode
        }
      },
      handleClose () {
        this.getData()
      },
      handleDelete (row) {
        let self = this
        self.$confirm('你确定要删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$axios
            .post('roleUserAction/deleteUser', {
              roleId: self.roleId,
              userId: row.userId
            })
          .then(function (res) {
              if (res.data.result) {
                  self.$message({
                      message: '删除成功',
                      type: 'success'
                  })
                  self.getData()
              } else {
                  self.$message.error(res.data.msg)
              }
          })
        })

      }

    }
  }
</script>
